<!doctype html>
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>地图获取经纬度</title>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#map_canvas {
	margin: 0 auto;
	border: 2px solid #f9f7f6;
	width: 80%;
	height: 80%;
}
</style>
</head>
<body>
	<div id="map_canvas"></div>
	<div>
		<label>经度</label> <input type='text' id='form_longitude'
			readonly="readonly" /> <label>纬度</label> <input type='text'
			id='form_latitude' readonly="readonly" />
	</div>
	<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<script
		src="http://api.map.baidu.com/api?v=2.0&ak=74af171e2b27ee021ed33e549a9d3fb9"></script>
	<script type="text/javascript">
		var map = new BMap.Map("map_canvas"); // 创建地图实例
				var initLat;
				var initLng;
				if(!initLat&&!initLng){
					initLng = 116.5837177659;
					initLat = 35.4146383822;
				}
				var point = new BMap.Point(initLng, initLat); // 创建点坐标  
				map.centerAndZoom(point, 13); // 初始化地图，设置中心点坐标和地图级别  
				var mk = new BMap.Marker(point);        // 创建标注    
				mk.addEventListener("dragend", showInfo);
				mk.enableDragging(); //可拖拽
				getAddress(point);
				map.addOverlay(mk);   // 将标注添加到地图中
				map.panTo(point);
				map.enableScrollWheelZoom(); // 启用滚轮放大缩小 
				map.addControl(new BMap.NavigationControl()); // 启用放大缩小 尺
				//单击获取点击的经纬度
				map.addEventListener("click", function(e) {
					map.clearOverlays();
					//存储经纬度
					var lng = e.point.lng;
					var lat = e.point.lat;

					//在地图上面描点
					var marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建标注
					map.addOverlay(marker);
					marker.enableDragging(); //可拖拽
					marker.addEventListener("dragend", function(e){
						var gc = new BMap.Geocoder();
						gc.getLocation(e.point, function(rs) {
							var addComp = rs.addressComponents;
							var address = addComp.province + addComp.city
									+ addComp.district + addComp.street
									+ addComp.streetNumber;//获取地址
							//画图 ---》显示地址信息
							var label = new BMap.Label(address, {
								offset : new BMap.Size(20, -10)
							});
							map.removeOverlay(marker.getLabel());//删除之前的label 
							label.setStyle({
								position: "relative",
								display: "inline",
								cursor: "inherit",
								backgroundColor: "rgb(255, 255, 255)", 
								border: "1px solid rgb(255, 0, 0)",
								padding: "1px; white-space: nowrap",
								fontStyle: "normal",
								fontVariant: "normal",
								fontWeight: "normal",
								fontStretch: "normal",
								fontSize: "12px",
								lineHeight: "normal",
								fontFamily: "arial, sans-serif",
								zIndex: "80",
								userSelect: "none",
								left: "20px",
								top: "-10px"
							});
							marker.setLabel(label);
							$("#form_longitude").val(e.point.lng);
							$("#form_latitude").val(e.point.lat);
						});
					});
					var gc = new BMap.Geocoder();
					//获取地址的数据地址
					var pt = e.point;
					$("#form_longitude").val(e.point.lng);
					$("#form_latitude").val(e.point.lat);
					gc.getLocation(pt, function(rs) {
						var addComp = rs.addressComponents;
						address = addComp.province + addComp.city
								+ addComp.district + addComp.street
								+ addComp.streetNumber;

						//画图
						var label = new BMap.Label(address, {
							offset : new BMap.Size(20, -10)
						});
						label.setStyle({
							position: "relative",
							display: "inline",
							cursor: "inherit",
							backgroundColor: "rgb(255, 255, 255)", 
							border: "1px solid rgb(255, 0, 0)",
							padding: "1px; white-space: nowrap",
							fontStyle: "normal",
							fontVariant: "normal",
							fontWeight: "normal",
							fontStretch: "normal",
							fontSize: "12px",
							lineHeight: "normal",
							fontFamily: "arial, sans-serif",
							zIndex: "80",
							userSelect: "none",
							left: "20px",
							top: "-10px"
						});
						marker.setLabel(label);
					});
				});
				var loadCount = 1;  
			    map.addEventListener("tilesloaded",function(){  
			        if(loadCount == 1){  
			            map.setCenter(point);  
			        }         
			        loadCount = loadCount + 1;  
			     });  
				//绑定Marker的拖拽事件
				function showInfo(e) {
					var gc = new BMap.Geocoder();
					gc.getLocation(e.point, function(rs) {
						var addComp = rs.addressComponents;
						var address = addComp.province + addComp.city
								+ addComp.district + addComp.street
								+ addComp.streetNumber;//获取地址
						//画图 ---》显示地址信息
						var label = new BMap.Label(address, {
							offset : new BMap.Size(20, -10)
						});
						map.removeOverlay(mk.getLabel());//删除之前的label 
						label.setStyle({
							position: "relative",
							display: "inline",
							cursor: "inherit",
							backgroundColor: "rgb(255, 255, 255)", 
							border: "1px solid rgb(255, 0, 0)",
							padding: "1px; white-space: nowrap",
							fontStyle: "normal",
							fontVariant: "normal",
							fontWeight: "normal",
							fontStretch: "normal",
							fontSize: "12px",
							lineHeight: "normal",
							fontFamily: "arial, sans-serif",
							zIndex: "80",
							userSelect: "none",
							left: "20px",
							top: "-10px"
						});
						mk.setLabel(label);
						var jing_du_value = e.point.lng;
						var wei_du_value = e.point.lat;
						$("#form_longitude").val(jing_du_value);
						$("#form_latitude").val(wei_du_value);
					});
				}
				//获取地址信息，设置地址label
				function getAddress(point) {
					var gc = new BMap.Geocoder();
					gc.getLocation(point, function(rs) {
						var addComp = rs.addressComponents;
						var address = addComp.province + addComp.city
								+ addComp.district + addComp.street
								+ addComp.streetNumber;//获取地址
						//画图 ---》显示地址信息
						var label = new BMap.Label(address, {
							offset : new BMap.Size(20, -10)
						});
						map.removeOverlay(mk.getLabel());//删除之前的label 
						label.setStyle({
							position: "relative",
							display: "inline",
							cursor: "inherit",
							backgroundColor: "rgb(255, 255, 255)", 
							border: "1px solid rgb(255, 0, 0)",
							padding: "1px; white-space: nowrap",
							fontStyle: "normal",
							fontVariant: "normal",
							fontWeight: "normal",
							fontStretch: "normal",
							fontSize: "12px",
							lineHeight: "normal",
							fontFamily: "arial, sans-serif",
							zIndex: "80",
							userSelect: "none",
							left: "20px",
							top: "-10px"
						});
						mk.setLabel(label);
					});

				}
	</script>

</body>
</html>